<template>
	<view class="mine-container">
		<el-card class="box-card" style="width: 100%;">
			<div slot="header" class="clearfix" style="width: 100%;">
				<el-select class="select" v-model="selectedSource" placeholder="客户来源" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in customSource" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select class="select" v-model="selectedLevel" placeholder="客户等级" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in customLevel" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select class="select" v-model="selectedFollowStatus" placeholder="跟进状态" filterable
					:filter-method="dataFilter" clearable>
					<el-option v-for="item in followStatus" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" @click="queryByFilter()"
					style="width: 55px; text-align:center; font-size: small;">搜索</el-button>
				<el-button type="info" plain @click="back()"
					style="width: 55px; text-align: center; font-size: small;">返回</el-button>
			</div>
			<div style="height: 100%;">
				<el-col :span="18" style="width: 100%;">
					<ul class="infinite-list" v-infinite-scroll="load" style="overflow:visible; width: 100%;">
						<li v-for="custom in customs" class="infinite-list-item" style="width: 100%;">
							<el-card shadow="always"
								style="height: 100%;width: 400px;margin-bottom: 10px; margin-right: 5px;">
								<view class="custom" @click="showCustomDetail(custom.id)">
									<table>
										<tr>
											<td>
												{{custom.name}}
												<h4 class="level" style="float: left;">{{custom.level}}</h4>
											</td>
											<td>{{custom.company}}</td>

										</tr>
										<tr>
											<td>客户来源：{{custom.source}}</td>
											<td>联系人：{{custom.contacts}}</td>
										</tr>
										<tr>
											<td>状态：{{custom.followStatus}}</td>
										</tr>
									</table>
								</view>
							</el-card>
						</li>
					</ul>
				</el-col>
			</div>
		</el-card>

	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				userid: 0,
				category: 0,
				customs: [],
				customSource: [{
					value: '电话介绍',
					label: '电话介绍',
				}, {
					value: '转介绍',
					label: '转介绍'
				}, {
					value: '网络宣传',
					label: '网络宣传'
				}, {
					value: '线下宣传',
					label: '线下宣传'
				}],
				customLevel: [{
					value: 'A',
					label: 'A'
				}, {
					value: 'B',
					label: 'B'
				}, {
					value: 'C',
					label: 'C'
				}],
				followStatus: [{
					value: '初次沟通',
					label: '初次沟通'
				}, {
					value: '方案报价',
					label: '方案报价'
				}, {
					value: '合同签订',
					label: '合同签订'
				}],
				selectedSource: '',
				selectedLevel: '',
				selectedFollowStatus: ''
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('id')
			this.category = options.category,
			this.selectedSource = options.selectedSource,
			this.selectedLevel = options.selectedLevel,
			this.selectedFollowStatus = options.selectedFollowStatus
			console.log(this.userId + ' ' + this.category + ' ' + this.selectedSource + ' ' + this.selectedLevel + ' ' +
				this.selectedFollowStatus);
			// 获取用户的客户列表
			uni.request({
				// url: 'http://localhost:8089/crmdemo/custom/queryCustomByUserIdAndCategory',
				url: 'http://localhost:8089/crmdemo/custom/queryCustomByFilter',
				data: {
					userId: this.userId,
					category: this.category,
					source: this.selectedSource,
					level: this.selectedLevel,
					followStatus: this.selectedFollowStatus
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.customs = res.data.result
					} else {
						this.$modal.msgError("获取客户客户列表失败")
					}
				}
			});
		},
		methods: {
			showCustomDetail(customId) {
				console.log(customId)
				uni.navigateTo({
					url: '/pages/work/kehu/customDetail?customId=' + customId
				})
			},
			queryByFilter() {
				console.log(this.selectedSource + ' ' + this.selectedLevel + ' ' + this.selectedFollowStatus)
				uni.navigateTo({
					url: '/pages/work/kehu/showCustom?category=' + this.category + '&selectedSource=' + this
						.selectedSource + '&selectedLevel=' + this.selectedLevel + '&selectedFollowStatus=' + this
						.selectedFollowStatus
				})
			},
			back() {
				uni.reLaunch({
					url: '/pages/work/index'
				})
			},
			dataFilter(value) {
				if (value) {
					//val存在
					this.options2 = this.options.filter((item) => {
						if (
							!!~item.name.indexOf(value) ||
							!!~item.name.toUpperCase().indexOf(value.toUpperCase()) ||
							!!~item.code.indexOf(value) ||
							!!~item.code.toUpperCase().indexOf(value.toUpperCase())
						) {
							return true;
						}
					});
				} else {
					//val为空时，还原数组
					this.options2 = this.options;
				}
			}
		}


	}
</script>






<style lang="scss">
	ul {
		list-style: none;
	}

	li {
		margin-right: 50px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
	}

	.select {
		width: 110px;
		margin-left: 2px;
	}

	table {
		width: 350px;
		border-bottom: 1px solid silver;
	}

	td {
		width: 100px;
		padding: 2px;
	}

	tr {}

	.custom {
		width: 350px;
		border-bottom: 1px solid silver;
	}

	.level {
		border: 2px solid red;
		width: 17px;
		text-align: center;
	}

	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>